<style lang="scss" scoped>
.sortDiv{
    position: fixed;
    left: -277px;
    bottom: 23%;
    width: 350px;
    height: 58px;
    background: #201F2B;
    border-radius: 0 30px 30px 0;
    transition: left 0.5s;
    // transition: width 2s;
    overflow: hidden;
    img{
      width: 45px;
      display: block;
      margin-top: 7px;
      margin-left: 10px;
      cursor: pointer;
      float: left;
    }
    button{
      width: 45px;
      height: 45px;
      display: block;
      margin-top: 7px;
      margin-left: 10px;
      cursor: pointer;
      float: left;
      color: #fff;
      background: #535166;
      border: none;
      border-radius: 50%;
      line-height: 35px;
      font-size: 16px;
    }
  }
  .sortActive{
    // width: 70px;
    left: 0;
  }
</style>
<template>
  <div class="sortDiv" :class="isSort ? 'sortActive' : ''">
    <el-tooltip class="item" effect="dark" content="下移" placement="top">
      <el-button icon="el-icon-arrow-down" @click="mainSortClick('down')" />
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="上移" placement="top">
      <el-button icon="el-icon-arrow-up" @click="mainSortClick('up')" />
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="新增" placement="top">
      <el-button icon="el-icon-plus" @click="mainAddClick()" />
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="导入" placement="top">
      <el-button icon="el-icon-upload2" @click="mainSortClick('import')" />
    </el-tooltip>
    <!-- <el-tooltip class="item" effect="dark" content="导出" placement="top">
      <el-button icon="el-icon-download" />
    </el-tooltip> -->
    <el-tooltip class="item" effect="dark" content="删除" placement="top">
      <el-button icon="el-icon-delete" style="background:red" @click="mainDeleteCilck()" />
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="工具" placement="top">
      <el-button icon="el-icon-setting" @click="sortWidth()" />
    </el-tooltip>
    <!-- <img v-show="!isSort" src="../../assets/img/paixu.png" alt="" @click="sortWidth()"> -->
  </div>
</template>
<script>
export default {
  components: {

  },
  data() {
    return {
      input: '',
      isSort: false
    }
  },
  methods: {
    sortWidth() {
      console.log('paixu')
      this.isSort = !this.isSort
    },
    sortShou(val) {
      this.isSort = val
    },
    mainDeleteCilck() {
      this.$emit('mainDeleteClick', 'mainDeleteClick')
    },
    mainAddClick() {
      this.$emit('mainAddClick', 'mainAddClick')
    },
    mainSortClick(val) {
      this.$parent.getPrintData()
      this.$emit('mainSortClick', val)
    }
  }
}
</script>
